<template>
  <div>
    <n-alert title="提示" type="info" style="margin-bottom: 20px;">
      <span>上传员工先点击 <n-tag type="info">下载员工录入模板</n-tag> 获得模板，然后进行员工录入，录入完成后点击 <n-tag type="info">上传</n-tag>
        按钮提交员工信息至系统。</span>
    </n-alert>
    <ocean :use="template" class="theme_box"></ocean>
    <ocean :use="drawer"></ocean>
    <ocean :use="orderDrawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useDrawer, useForm, useTableTemplate } from '@/ocean';
import { EnterpriseAPI } from '@/app/api';
import EnterpriseForm from './form/enterprise.vue';
import { useDialog, useMessage } from 'naive-ui';
import Upload from '@/components/upload.vue';

type Column = {
  createTime: "2022-08-28 19:55:38"
  enterpriseAddress: "12"
  enterpriseName: "欧唯特"
  enterprisePhone: "12312312312"
  enterpriseType: "F"
  id: 22
  logo: null
  updateTime: "2022-08-28 19:55:38"
}

enum Type {
  'F' = '福利型',
  'K' = '开放型',
}

const dialog = useDialog()
const message = useMessage()

const drawer = useDrawer('企业表单', EnterpriseForm, { size: 'small' });

drawer.button('确认', { type: 'primary' }).click(() => {
  let formRef = drawer.getRef();
  formRef.submit().then(() => {
    drawer.close();
    template.query();
    message.success('操作成功')
  })
})
drawer.button('取消').click(() => {
  drawer.close();
})

const orderForm = useForm();
orderForm.setModel({
  startTime: new Date(),
  endTime: new Date()
})
orderForm.item('开始时间', 'startTime').date();
orderForm.item('结束时间', 'endTime').date();

const orderDrawer = useDrawer('获取企业账单', () => {
  return (
    <div>
      <ocean use={orderForm}></ocean>
    </div>
  )
})

orderDrawer.button('下载账单', { type: 'primary' }).click(() => {
  console.log(orderForm.model, orderRow)
  EnterpriseAPI.downloadOrder({
    ...orderForm.model,
    enterPriseId: orderRow.id,
    fileName: orderRow.enterpriseName,
    fileType: 'xlsx',
  })
});
orderDrawer.button('取消').click(() => { orderDrawer.close() });


const deleteRow = (row) => {
  dialog.warning({
    title: '提示',
    content: '是否确认删除企业：' + row.enterpriseName,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      EnterpriseAPI.deleteEnterprise({ enterpriseId: row.id }).then(() => {
        message.success('删除成功');
        template.query();
      })
    },
  })
}

let orderRow = null;
const getOrder = (row) => {
  orderRow = row;
  orderDrawer.open();
}



const template = useTableTemplate<Column>('合作企业列表', {
  query: data => EnterpriseAPI.queryEnterpriseList(data).then(({ data, total }) => {
    template.table.setData(data);
    template.pagination.setCount(total);
  })
});


template.form.item('企业名称', 'enterpriseName').input()
template.form.item('企业类型', 'enterpriseType').select({ options: [{ label: '开放型', value: 'K' }, { label: '福利型', value: 'F' }] })

template.button('添加合作企业', { type: 'primary' }).click(() => {
  drawer.setTitle('添加企业').open();
})

template.button('下载员工录入模板').click(() => {
  EnterpriseAPI.downloadStaffTemplate()
})

template.table.column('企业名称', 'enterpriseName');
template.table.column('企业类型', 'enterpriseType').enums(Type);
template.table.column('联系方式', 'enterprisePhone');
template.table.column('企业地址', 'enterpriseAddress');
template.table.column('创建时间', 'createTime');
template.table.column('更新时间', 'updateTime');
template.table.define({
  title: '操作',
  render: (row) => {
    let action = EnterpriseAPI.uploadStaffTemplate({
      enterpriseId: row.id as number
    })
    return (
      <n-space>
        <Upload props={{ ...action, showFileList: false, accept: '.xlsx' }}><n-button>上传</n-button></Upload>
        <n-button on-click={() => drawer.setTitle('编辑企业信息').open({ row })}>编辑</n-button>
        <n-button on-click={() => deleteRow(row)}>删除</n-button>
        <n-button on-click={() => getOrder(row)}>获取账单</n-button>
      </n-space>
    )
  }
});

template.query()
</script>